<template>
    <div class="search">
        <p class="p1">好吃好喝</p>
        <p class="p2">一家只卖当日菜的社区电商</p>
        <div class="zhibo">
            <div class="zhibobox" @click="$router.push('/liveStream')">
                <van-icon name="bar-chart-o" color="#fff" />直播ing
            </div>
        </div>
        <van-search
            background="#FF3D40"
            shape="round"
            placeholder="请输入搜索关键词"
            @click="router.push('/search')"
        />
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<style lang="scss" scoped>
// 头部区
.search {
    .van-search {
        background-color: #ff3d40;
    }
    p {
        font-family: 'cute';
        font-weight: bold;
        color: white;
        padding: 0 12px;
    }
    .p1 {
        margin: 0;
        padding-top: 10px;
        font-size: 36px;
    }
    .p2 {
        margin: 10px 0 10px 0;
        font-size: 18px;
    }
    .zhibo {
        position: absolute;
        right: 0;
        top: 40px;
        color: white;
        border: solid 2px white;
        border-radius: 12px 0 0 12px;
        width: 18%;
        height: 26px;
        display: flex;
        align-items: center;
        font-size: 10px;
        .zhibobox {
            padding-left: 10px;
        }
    }
}
</style>
